<!--
 * @Author: weikang
 * @Description:
 * @Date: 2023-12-22 22:15:25
 * @LastEditTime: 2024-03-19 14:00:17
 * @FilePath: \env-manager-pc\src\views\dashboard\yunwei\qiye_jiancedian.vue
-->
<script setup lang="ts">
import * as Echarts from 'echarts'
import useDashboardStore from '@/store/modules/dashboard'

const dashboardStore = useDashboardStore()

const offsetX = 8
const offsetY = 4
// 绘制左侧面
const CubeLeft = Echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath(ctx: any, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c0 = [shape.x, shape.y]
    const c1 = [shape.x - offsetX, shape.y - offsetY]
    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
    const c3 = [xAxisPoint[0], xAxisPoint[1]]
    ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
  },
})
// 绘制右侧面
const CubeRight = Echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath(ctx: any, shape) {
    const xAxisPoint = shape.xAxisPoint
    const c1 = [shape.x, shape.y]
    const c2 = [xAxisPoint[0], xAxisPoint[1]]
    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
    const c4 = [shape.x + offsetX, shape.y - offsetY]
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
  },
})
// 绘制顶面
const CubeTop = Echarts.graphic.extendShape({
  shape: {
    x: 0,
    y: 0,
  },
  buildPath(ctx: any, shape) {
    const c1 = [shape.x, shape.y]
    const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
    const c3 = [shape.x, shape.y - offsetX]
    const c4 = [shape.x - offsetX, shape.y - offsetY]
    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
  },
})
// 注册三个面图形
Echarts.graphic.registerShape('CubeLeft', CubeLeft)
Echarts.graphic.registerShape('CubeRight', CubeRight)
Echarts.graphic.registerShape('CubeTop', CubeTop)
// 主体
const option = computed(() => {
  return {
    legend: {
      icon: 'circle',
      bottom: 0,
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 16,
      textStyle: {
        fontSize: 12,
        color: '#303133',
      },
      data: ['监测点数', '企业数'],
    },
    title: {
      text: '',
      left: 'center',
      textStyle: {
        color: '#2B7BD6',
      },
    },
    tooltip: {
      trigger: 'item',
    },
    grid: {
      width: '95%',
      // height: "95%",
      top: 40,
      left: 0,
      right: 0,
      bottom: 25,
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: dashboardStore.envDashboard?.OwnerOrgs?.map((item: any) => item.OwnerOrgName),
      // X
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#E2E2E2',
        },
      },
      axisLabel: {
        fontSize: 14,
        interval: 0,
        textStyle: {
          color: '#303133', // 更改坐标轴文字颜色
          fontSize: 12, // 更改坐标轴文字大小
        },
      },
    },
    yAxis: {
      name: '单位：家',
      type: 'value',
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#E2E2E2',
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        fontSize: 14,
        textStyle: {
          color: '#303133', // 更改坐标轴文字颜色
          fontSize: 12, // 更改坐标轴文字大小
        },
      },
    },
    series: [
      // 柱体
      {
        name: '监测点数',
        type: 'custom',
        stack: 'Ad',
        renderItem: (params: any, api: any) => {
          const location = api.coord([api.value(0), api.value(1)])
          return {
            type: 'group',
            x: -20,
            children: [
              {
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(2, 93, 196, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(0, 155, 217, 1)',
                    },
                  ]),
                },
              },
              {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(2, 93, 196, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(115, 246, 255, 1)',
                    },
                  ]),
                },
              },
              {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(28, 240, 255, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(201, 251, 255, 1)',
                    },
                  ]),
                },
              },
            ],
          }
        },
        data: dashboardStore.envDashboard?.OwnerOrgs?.map((item: any) => item.EntAllDevNum),
      },
      // 柱体
      {
        name: '企业数',
        type: 'custom',
        stack: 'Ad',
        renderItem: (params: any, api: any) => {
          const location = api.coord([api.value(0), api.value(1)])
          return {
            type: 'group',
            x: 1,
            children: [
              {
                type: 'CubeLeft',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(10, 148, 72, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(11, 255, 136, 1)',
                    },
                  ]),
                },
              },
              {
                type: 'CubeRight',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(0, 255, 132, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(117, 255, 172, 1)',
                    },
                  ]),
                },
              },
              {
                type: 'CubeTop',
                shape: {
                  api,
                  xValue: api.value(0),
                  yValue: api.value(1),
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: 'rgba(117, 255, 172, 1)',
                    },
                    {
                      offset: 1,
                      color: 'rgba(240, 255, 246, 1)',
                    },
                  ]),
                },
              },
            ],
          }
        },
        data: dashboardStore.envDashboard?.OwnerOrgs?.map((item: any) => item.EntNum),
      },
    ],
  }
})

const chartRef = ref<any>()
let chart: any = null
onMounted(() => {
  chart = Echarts.init(chartRef.value)
  chart.setOption(option.value)
  window.addEventListener('resize', () => {
    chart.resize()
  })
})

dashboardStore.$subscribe((mutation, state) => {
  if (state.envDashboard?.OwnerOrgs) {
    chart.setOption(option.value)
  }
})
</script>

<template>
  <PageMain title="企业和检测点分布情况">
    <div ref="chartRef" class="h-[30vh] min-h-[300px] w-full overflow-hidden" />
  </PageMain>
</template>
